<template>
	
	
	<view class="user-container PageBg">
		<view class="" :style="{height:getStatusBarHeight()+'px'}">
			
		</view>
		<view class="user-wrap">
			<view class="user-picture">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="username">
				{{userInfo.IP || "用户" }}
			</view>
			<view class="address">
				来自：{{userInfo.address?.city || '未知'}}
			</view>
		</view>
		<view class="section">
			<view class="card">
				<select-list @clickItem="handleClickItem" :items="myThings" ></select-list>
			</view>
		</view>
		<view class="section">
			<view class="card">
				<select-list :items="setting"></select-list>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { myThings,setting } from './const';
import { getSystemInfo,getTitleBarHeight ,getStatusBarHeight,getNavBarHeight} from '../../utils/system';
import { apiGetUserInfo } from '../../api/apis';
import { ref } from 'vue';
	
	let userInfo = ref(null)
	
	getUserInfo();
	function handleClickItem(e){
		switch(e.value){
			case "myDownLoad":
			uni.navigateTo({
				url:"/pages/classifylist/classifylist?name=我的下载&type=download"
			})
			break;
			case "myScore":
			uni.navigateTo({
				url:"/pages/classifylist/classifylist?name=我的评分&type=score"
			})
			
			
			break;
		}
		console.log(e);
	}
	
	async function getUserInfo(){
		try {
			let result =   await apiGetUserInfo()
			console.log(result);
			userInfo.value = result;
			myThings.forEach(item=>{
				if(item.value=='myDownLoad') item.number = result.downloadSize
				if(item.value=='myScore') item.number = result.scoreSize
			})
		} catch (error) {
			//TODO handle the exception
		}
		
	}
</script>

<style lang="scss" scoped>
	       .user-container{
			   .user-wrap{
				   padding: 50rpx 0;
				   display: flex;
				   flex-direction: column;
				   align-items: center;
				   .user-picture{
					   width: 160rpx;
					   height: 160rpx;
					   overflow: hidden;
					   border-radius: 50%;
					   image{
						   width: 100%;
						   height: 100%;
					   }
				   }
					.username{
						padding: 15rpx;
						font-size: 30rpx;
						font-weight: 700;
					}
					.address{
						font-size: 24rpx;
						color: #bbb;
					}
			   }
				.section{
					margin-bottom: 50rpx;
					width: 100%;
					padding: 0 30rpx;
					.card{
						border-radius: 10px;
						box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
					}
				}
		   }
</style>
